<style lang="less" scoped>
    .container{
        margin-top: 3rem;
        width: 100%;
    }
    .drawer-left{
        margin-top: 3rem;
        position: absolute;
        background-color: rgba(255,255,255,1);
        left: 0px;
        top:0px;
        width: 100%;
        height: 100%;
        animation: 0.4s drawer-animation 1;
        transition: tr;
    .btn-device-list{
        margin-top: 0.4rem;
    }
    }
    .collection-main-body{

    }
    @-webkit-keyframes drawer-animation{
        0%{ transform: translateX(-100%)}
        100%{ transform: translateX(0)}
    }
</style>
<template>
    <div>
        <x-header style="width:100%;position:fixed;left:0;top:0;z-index:100;" :right-options="{showMore: true}" @on-click-more="getCollection">
            <span>采集设备</span>
            <x-icon slot="overwrite-left" @click="showDrawer" type="navicon" size="35"
                    style="fill:#fff;position:relative;top:-8px;left:-3px;"></x-icon>
        </x-header>
        <div class="container">
            <div v-show="drawerShow" class="drawer-left fadeOut">
                <group title="选择">
                    <selector title="区域"  :options="areaList" @on-change="areaChange" v-model="dataForm.areaId"></selector>
                    <selector title="建筑" :options="buildList" @on-change="buildChange"   v-model="dataForm.buildId"></selector>
                </group>
                <x-button class="btn-device-list" @click.native="getCollection" type="primary">提交</x-button>
                <x-button class="btn-device-list" @click.native="cancelSelect" type="primary">取消</x-button>
            </div>

            <div class="collection-main-body">
                <div class="collection-list">
                    <collection-node :collection-info="item" v-for="item in collectionList" :key="item.id"></collection-node>
                </div>
            </div>
        </div>
    </div>
</template>


<script>
    import DrawerCollection from './children/drawer-collection.vue'
    import CollectionNode from './children/collection-node.vue'
    export default{
        data(){
            return {
                drawerShow: false,
                dataForm:{
                    areaId:0,
                    buildId:0,
                    concentratorId:0,
                    nodeId:0,
                    circuitId:0,
                    search:'',
                    page:1,
                    row:100
                },
                areaList:[],
                buildList:[],
                conList:[],
                nodeList:[],
                circuitList:[],
                collectionList:[],
                refreshValue:{}
            }
        },
        components: {
            DrawerCollection,CollectionNode
        },
        computed: {},
        methods: {
            showDrawer(){
                this.drawerShow = !this.drawerShow;
            },
            getCollection(){
                this.$store.dispatch('GetBuildCollection', this.dataForm.buildId).then((response) => {
                    if (response.status == 1) {
                        this.collectionList = response.data;
                        this.drawerShow = false;
                    }else {
                        this.$vux.toast.text('登录失败', 'bottom');
                    }

                }).catch((err) => {
                    this.$vux.loading.hide()
                });
            },
            cancelSelect(){
                this.drawerShow = false;
            },
            getArea(){
                let data = {
                    parentId:0,
                    deviceRange:0
                };
                this.$store.dispatch('SelectDevice', data).then((data) => {
                    let areas = [];
                    areas.push({
                        key:0,
                        value:'未指定'
                    })
                    if (data.status == 1) {
                        data.result.forEach(function (item,index) {
                            areas.push({
                                key:item.id,
                                value:item.name
                            })
                        });
                        this.areaList = areas;
                    }else {
                        this.$vux.toast.text('登录失败', 'bottom');
                    }
                }).catch((err) => {
                    this.$vux.loading.hide()
                });
            },
            timerRefresh(){
                this.refreshValue = setInterval(()=>{
                    this.getLight();
                },20000);
            },
            getBuild(){
                let data = {
                    parentId:this.dataForm.areaId,
                    deviceRange:1
                }
                this.$store.dispatch('SelectDevice', data).then((data) => {
                    let builds = [];

                    if (data.status == 1) {
                        builds.push({
                            key:0,
                            value:'未指定'
                        });
                        data.result.forEach(function (item,index) {
                            builds.push({
                                key:item.id,
                                value:item.name
                            })
                        });
                        this.buildList = builds;
                    }else {
                        this.$vux.toast.text('登录失败', 'bottom');
                    }
                }).catch((err) => {
                    this.$vux.loading.hide()
                });
            },
            areaChange(value){
                this.dataForm.areaId = value;
                this.getBuild();
            },
            buildChange(value){
                this.dataForm.buildId= value;
            },

        },
        created: function () {
            this.getArea();
            this.getCollection();
            this.timerRefresh();
        },
        beforeRouteLeave(to, from, next){
            window.clearInterval(this.refreshValue);
            next();
        }
    }
</script>
